<template>
    <div>
        <full-calendar
            ref="fullCalendar"
            style="height: 100%; max-width: 100%"
            :options="calendarOptions"
        >
        </full-calendar>
    </div>
</template>

<script>
// 教室日历组件
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";
export default {
    components: {
        FullCalendar, // make the <FullCalendar> tag available
    },
    data() {
        return {
            calendarOptions: {
                //   timeGridPlugin  可显示每日时间段
                height: 700,
                plugins: [dayGridPlugin, interactionPlugin],
                headerToolbar: {
                    left: "prev,next today",
                    center: "title",
                    right: "dayGridMonth,dayGridWeek,dayGrid",
                    // right: 'agendaWeek,dayGridWeek,dayGrid'
                },
                handleWindowResize: true,
                buttonText: {
                    // 设置按钮
                    today: "今天",
                    month: "月",
                    week: "周",
                    dayGrid: "天",
                },
                // allDaySlot: false,
                editable: true,
                selectable: true,
                navLinks: true,

                // displayEventEnd: true,//所有视图显示结束时间
                initialView: "dayGridMonth", // 设置默认显示月，可选周、日
                dateClick: this.handleDateClick,
                eventClick: this.handleEventClick,
                eventsSet: this.handleEvents,
                select: this.handleDateSelect,
                // timezone
                // 设置日程
                events: [],
                eventColor: "#f08f00", // 修改日程背景色
                locale: "zh-cn", // 设置语言
                weekNumberCalculation: "ISO", // 周数
                customButtons: {
                    prev: {
                        // this overrides the prev button
                        text: "PREV",
                        click: () => {
                            this.prev();
                        },
                    },
                    next: {
                        // this overrides the next button
                        text: "PREV",
                        click: () => {
                            // let calendarApi = this.$refs.fullCalendar.getApi();
                            // calendarApi.next();
                            this.next();
                        },
                    },
                    today: {
                        text: "今天",
                        click: () => {
                            this.today();
                        },
                    },
                },
            },
        };
    },
    methods: {
          // 点击日历
            handleDateClick: function (arg) {
                // this.$forceUpdate();
                // this.cancelMeetingStatus = false;
                // this.editFlag = false;
                // this.dialogVisible = true;
                // this.ruleForm.roomId = this.activeNum;
                // this.change(this.activeNum);
            },
        // 添加日历事件
        addEvents(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // 获取物资list
                    // this.getMaterialList();
                    // this.ruleForm.beginDate = `${this.ruleForm.showStartDate} ${this.ruleForm.showStartTime}`;
                    // this.ruleForm.endDate = `${this.ruleForm.showEndDate} ${this.ruleForm.showEndTime}`;
                    // // console.log(this.ruleForm);
                    // api.queryRoomSubscribe(this.ruleForm).then(() => {
                    //     this.dialogVisible = false;
                    //     this.$message({
                    //         message: "预约成功！",
                    //         type: "success",
                    //     });
                    //     this.$refs["ruleForm"].resetFields();
                    //     this.getReservationList(this.activeNum);
                    // });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        handleEventClick(calEvent) {
            // this.editFlag = true;
            // let id = calEvent.event.id;
            // let info = this.subList.filter((item) => {
            //     return item.recordId == id;
            // });
            // //获取当前教室详情
            // this.dialogVisible = true;
            // this.$nextTick(() => {
            //     this.ruleForm = _.cloneDeep(info[0]);
            //     // 判断是否可以取消预约
            //     this.judeCancel(this.ruleForm);
            //     // 处理物资ids回显物资
            //     this.ruleForm.mrMaterialDtls = this.getMatIds(
            //         this.ruleForm.mrRecordDtlDto
            //     );
            //     // 处理时间回显
            //     this.getShowTime(
            //         this.ruleForm.beginDate,
            //         this.ruleForm.endDate
            //     );
            //     // 回显教室室价格 备注信息
            //     this.getRoomInfo(this.ruleForm.roomId);
            //     // 将手机号转为 Number格式
            //     this.ruleForm.extNo = this.ruleForm.extNo ? Number(this.ruleForm.extNo) : 0;
            // });
        },
    },
};
</script>

<style lang="scss" scoped>
.calendar-box {
    height: 710px;
    overflow-y: scroll;
}
.fc {
    max-width: 100% !important;
}
</style>